<template>
    <div id="Vacc_register">
        <el-breadcrumb separator="/" style="padding-left:10px;padding-bottom:10px;font-size:12px;">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>疫苗管理</el-breadcrumb-item>
            <el-breadcrumb-item>疫苗下放</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 疫苗登记卡片区 -->
        <el-card class="box-card">
            疫苗下发给接种点
            <el-form style="margin-top:15px" :inline="true" ref="form" :model="queryMap" label-width="70px" size="small">
                <el-form-item label="疫苗名称">
                    <el-input
                            @keyup.enter.native="searchDevolute"
                            @clear="searchDevolute"
                            clearable
                            v-model="queryMap.vaccineName"
                            placeholder="请输入疫苗名称模糊查询"
                    ></el-input>
                </el-form-item>

                <el-form-item label="接种点名称" label-width="90px">
                    <el-input
                            @keyup.enter.native="searchDevolute"
                            clearable
                            @clear="searchDevolute"
                            v-model="queryMap.vaccSiteName"
                            placeholder="请输入接种点名称查询"
                    ></el-input>
                </el-form-item>

                <el-form-item style="margin-left:20px;">
                    <el-button type="primary" @click="searchDevolute" icon="el-icon-search">查询</el-button>
                    <el-button
                            type="success"
                            icon="el-icon-plus"
                            @click="addDialogVisible=true"
                            v-hasPermission="'devolution:add'"
                    >下发疫苗</el-button>
                    <!-- 高级搜索按钮 -->
                    <el-button type="primary" size="small" @click="showAdvanceSearch = !showAdvanceSearch">
                        <i :class="showAdvanceSearch ? 'el-icon-caret-top' : 'el-icon-caret-bottom'"
                            style="margin-right: 5px" aria-hidden="true"></i>高级搜索</el-button>
                </el-form-item>
                <!-- 搜索条件  -->
                <el-collapse-transition>
                    <div v-show="showAdvanceSearch" class="searchStyle">
                        <!-- 第一列 -->
                        <el-row style="margin-top:10px">
                            <el-col :span="7">
                                <el-form-item label="供应商名称" label-width="90px" style="margin-left:10px;">
                                    <el-input v-model="queryMap.supplierName" style="width:180px;" clearable @clear="searchDevolute" placeholder="输入供应商名称查询"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="7">
                                <el-form-item label="接种点电话" label-width="90px">
                                    <el-input v-model="queryMap.vaccSitePhone" style="width:180px;" clearable @clear="searchDevolute" placeholder="输入接种点电话查询"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="7">
                                <el-form-item label="接种点所属区域" label-width="110px">
                                    <el-input v-model="queryMap.vaccSiteArea" style="width:180px;" clearable @clear="searchDevolute" placeholder="省市县区"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <!-- 第二列 -->
                        <el-row>
                            <el-col :span="6">
                                <el-form-item label="注射总针数" label-width="90px" style="margin-left:10px;">
                                    <el-select
                                            clearable
                                            @change="searchDevolute"
                                            @clear="searchDevolute"
                                            style=" width:120px;"
                                            v-model="queryMap.totalNeedle"
                                            placeholder="请选择针数"
                                    >
                                        <el-option
                                                v-for="needle in needles"
                                                :label="needle"
                                                :key="needle"
                                                :value="needle"
                                        >
                                            <span style=" color: #ED2C2A; font-size: 15px">
                                                <el-tag size="small" style="width:80px;text-align:center;"  effect="dark" type="primary">
                                                {{ needle }}针
                                                </el-tag>
                                            </span>
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="疫苗等级" label-width="90px">
                                    <el-select
                                            clearable
                                            @change="searchDevolute"
                                            @clear="searchDevolute"
                                            style=" width:120px;"
                                            v-model="queryMap.vaccDegree"
                                            placeholder="请选择等级"
                                    >
                                        <el-option
                                                v-for="degree in vaccDeg"
                                                :label="degree.label"
                                                :key="degree.id"
                                                :value="degree.id"
                                        >
                                            <span style=" color: #000; font-size: 13px">
                                                <el-tag size="small" style="width:45px;text-align:center;"  effect="dark" type="primary">
                                                {{ degree.label }}
                                                </el-tag>
                                                疫苗
                                            </span>
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="疫苗类别" label-width="80px" prop="vaccineType">
                                    <el-select
                                            clearable
                                            @change="searchDevolute"
                                            @clear="searchDevolute"
                                            style=" width:165px;"
                                            v-model="queryMap.vaccineType"
                                            placeholder="请选择疫苗类别"
                                    >
                                        <el-option
                                            v-for=" vaccType in vaccineTypes "
                                            :label="vaccType.type"
                                            :key="vaccType.id"
                                            :value="vaccType.id"
                                        >
                                            <span style="margin-left:10px; color: #ED2C2A;">
                                                <el-tag size="small" style="width:100px;text-align:center;font-size: 17px；"  effect="dark" type="primary">
                                                {{ vaccType.type }}
                                                </el-tag>
                                            </span>
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="5">
                                <el-form-item>
                                    <el-button  @click="reset" icon="el-icon-refresh">重置</el-button>
                                    <el-button type="primary" @click="searchDevolute" icon="el-icon-search">查询</el-button>
                                    <!-- <el-button @click="downExcel" v-hasPermission="'user:export'"  icon="el-icon-download">导出</el-button> -->
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                </el-collapse-transition>
            </el-form>

            <!-- 表格区域 -->
            <el-table v-loading="loading" 
                     size="small"
                     :header-cell-style="{textAlign: 'center'}"
                     :cell-style="{ textAlign: 'center' }"
                     :data="devolutRecordList" 
                     border style="width: 100%;" 
                     height="445">
                <el-table-column type="index" fixed="left" label="序号" width="50"></el-table-column>
                <el-table-column prop="vaccineName" fixed="left" label="疫苗名称" width="130"></el-table-column>
                <el-table-column prop="vaccDegree" label="等级" width="70">
                    <template slot-scope="scope">
                        <el-tag size="small" effect="plain" v-if="scope.row.vaccDegree == 1" type="success">甲类</el-tag>
                        <el-tag size="small" effect="plain" v-else-if="scope.row.vaccDegree == 2" type="success">乙类</el-tag>
                        <el-tag size="small" effect="plain" v-else-if="scope.row.vaccDegree == 3" type="success">丙类</el-tag>
                        <el-tag size="small" effect="plain" v-else-if="scope.row.vaccDegree == 4" type="success">丁类</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="vaccineType" label="疫苗类别" width="120">
                    <template slot-scope="scope">
                        <div  v-for="vacctype in vaccineTypes" :key="vacctype.id" >
                            <el-tag size="small" v-if="scope.row.vaccineType == vacctype.id">{{vacctype.type}}</el-tag>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="totalNeedle" label="注射针数" width="80">
                        <template slot-scope="scope">
                            <el-tag size="small" effect="dark" type="success">{{scope.row.totalNeedle}}</el-tag>
                        </template>
                    </el-table-column>
                <el-table-column prop="vaccSiteName" label="下发接种点" width="150" sortable></el-table-column>
                <el-table-column prop="vaccSitePhone" label="接种点电话" width="120"></el-table-column>
                <el-table-column prop="stock" label="接种点剩余" width="110" sortable>
                    <template slot-scope="scope">
                            <el-tag size="small" v-if="scope.row.stock >= 100" effect="dark" type="primary">{{scope.row.stock}}</el-tag>
                            <el-tag size="small" v-else effect="dark" type="danget">{{scope.row.stock}}</el-tag>
                        </template>
                </el-table-column>
                <el-table-column prop="createTime" label="下发时间" width="160" sortable></el-table-column>
                <el-table-column prop="deCount" label="下发数量" width="100" sortable></el-table-column>
                <el-table-column prop="vaccSiteArea" label="接种点所在区域" width="250"></el-table-column>
                <el-table-column prop="vaccSiteAddress" label="接种点详细地址" width="200"></el-table-column>
                <el-table-column prop="supplierName" label="供应商名称" width="150">
                    <template slot-scope="scope">
                            <el-tag size="small" effect="dark" type="">{{scope.row.supplierName}}</el-tag>
                        </template>
                </el-table-column>
                <el-table-column prop="supplierArea" label="供应商所属区域" width="200"></el-table-column>
                <el-table-column label="操作" fixed="right" width="200px" >
                    <template slot-scope="scope">
                        <el-button   v-hasPermission="'user:edit'" size="small" type="primary" icon="el-icon-picture-outline" @click="getDevoInfo(scope.row.id)"></el-button>
                        <!-- <el-button v-hasPermission="'user:delete'" disabled  type="danger" size="small"  icon="el-icon-delete" @click="del(scope.row.id)"></el-button> -->
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <el-pagination
                    style="margin-top:10px;"
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="this.queryMap.pageNum"
                    :page-sizes="[ 8, 15, 20, 30]"
                    :page-size="this.queryMap.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
            ></el-pagination>

            <!-- 添加对话框 -->
            <el-dialog title="下发疫苗至接种点" @close="closeAddDialog" :visible.sync="addDialogVisible" width="50%;">
                <!-- 表单 -->
                <span>
                    <el-form
                            :model="addForm"
                            :label-position="labelPosition"
                            :rules="addFormRules"
                            ref="addFormRef"
                            label-width="80px"
                    >
                        <!-- 疫苗信息 -->
                        <div class="supplierStyle">
                            <!-- 第一行 -->
                            <el-row>
                                <el-col :span="10">
                                    <el-form-item label="选择疫苗" label-width="80px" prop="vaccineId">
                                        <el-select
                                                style=" width:250px;"
                                                v-model="addForm.vaccineId"
                                                placeholder="请选择要下发的疫苗"
                                        >
                                            <el-option
                                                v-for=" vaccine in vaccinesList "
                                                :label="vaccine.vaccineName"
                                                :key="vaccine.id"
                                                :value="vaccine.id"
                                                @click.native="getVaccSelectforAdd(vaccine)"
                                            >
                                                <span style="color: #ED2C2A;">
                                                    <el-tag size="small" style="width:140px;text-align:center;font-size: 17px；"  effect="dark" type="primary">
                                                    {{ vaccine.vaccineName }}
                                                    </el-tag>
                                                    <el-tag size="small" style="width:60px;margin-left:10px;text-align:center;font-size: 17px；"  type="primary">
                                                    {{vaccine.overage}}
                                                    </el-tag>
                                                </span>
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="10">
                                    <el-form-item label="供应商名称" label-width="130px">
                                        <el-input disabled style=" width:280px;" v-model="tempVaccine.supplierName"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <!-- 第二行 -->
                            <el-row>
                                <el-col :span="8">
                                    <el-form-item label="疫苗类别" label-width="80px">
                                        <el-select
                                                disabled
                                                style=" width:165px;"
                                                v-model="tempVaccine.vaccineType"
                                        >
                                            <el-option
                                                v-for=" vaccType in vaccineTypes "
                                                :label="vaccType.type"
                                                :key="vaccType.id"
                                                :value="vaccType.id"
                                            >
                                                <span style="margin-left:10px; color: #ED2C2A;">
                                                    <el-tag size="small" style="width:100px;text-align:center;font-size: 17px；"  effect="dark" type="primary">
                                                    {{ vaccType.type }}
                                                    </el-tag>
                                                </span>
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                <el-form-item label="疫苗等级" style="margin-left:10px">
                                        <el-select
                                                disabled
                                                style=" width:150px;"
                                                v-model="tempVaccine.vaccDegree"
                                                placeholder="请选择等级"
                                        >
                                            <el-option
                                                    v-for="degree in vaccDeg"
                                                    :label="degree.label"
                                                    :key="degree.id"
                                                    :value="degree.id"
                                            >
                                                <span style="margin-left:10px; color: #000; font-size: 13px">
                                                    <el-tag size="small" style="width:50px;text-align:center;margin-right:5px"  effect="dark" type="primary">
                                                    {{ degree.label }}
                                                    </el-tag>
                                                    疫苗
                                                </span>
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="注射针数" label-width="75px">
                                        <el-input disabled style="width:152px;" v-model="tempVaccine.totalNeedle"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </div>
                        <!-- 接种点信息 -->
                        <div class="supplierStyle">
                            <!-- 第三行 -->
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="选择接种点" label-width="100px" prop="vaccineSiteId">
                                        <el-select
                                                style=" width:230px;"
                                                v-model="addForm.vaccineSiteId"
                                                placeholder="请选择要下发的接种点"
                                        >
                                            <el-option
                                                v-for=" vaccSite in vaccSites "
                                                :label="vaccSite.vaccSiteName"
                                                :key="vaccSite.id"
                                                :value="vaccSite.id"
                                                @click.native="getSiteSelectforAdd(vaccSite)"
                                            >
                                                <span style="color: #ED2C2A;">
                                                    <el-tag size="small" style="width:160px;text-align:center;font-size: 17px；"  effect="dark" type="primary">
                                                    {{ vaccSite.vaccSiteName }}
                                                    </el-tag>
                                                </span>
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="11">
                                    <el-form-item label="接种点电话" label-width="90px">
                                        <el-input disabled v-model="tempVaccineSite.phoneNumber"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <!-- 第四行 -->
                            <el-row>
                                <el-col :span="23">
                                    <el-form-item label="所属区域" label-width="100px">
                                        <el-input disabled  v-model="tempVaccineSite.area"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="23">
                                    <el-form-item label="详细地址" label-width="100px">
                                        <el-input disabled v-model="tempVaccineSite.address"></el-input>
                                    </el-form-item>
                                        </el-col>
                            </el-row>
                        </div>
                        <!-- 下发库存信息 -->
                        <div class="supplierStyle">
                            <el-row>
                                <el-col :span="11">
                                    <el-form-item label="下发数量" label-width="100px" prop="deCount">
                                        <el-input-number :min="1" :max="tempVaccine.overage" v-model="addForm.deCount"></el-input-number>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="该疫苗剩余库存" label-width="120px">
                                        <el-input disabled  v-model="tempVaccine.overage"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </div>
                    </el-form>
                </span>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="addDialogVisible = false" style="margin-right:50px">取消</el-button>
                    <el-button
                            type="primary"
                            @click="addDevolution"
                            :loading="btnLoading"
                            :disabled="btnDisabled"
                    >确定提交</el-button>
                </span>
            </el-dialog>

            <!-- 查看下发记录对话框 -->
            <el-dialog :title="showTitle" :visible.sync="showDialogVisible" width="50%"  @close="closeShowDialog">
                <!-- 表单 -->
                <span>
                    <el-form
                            :model="showForm"
                            :label-position="labelPosition"
                            label-width="80px"
                    >
                        <!-- 疫苗信息 -->
                        <div class="supplierStyle">
                            <!-- 第一行 -->
                            <el-row>
                                <el-col :span="10">
                                    <el-form-item label="疫苗名称" label-width="80px">
                                        <el-input disabled style=" width:250px;" v-model="showForm.vaccineName"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="10">
                                    <el-form-item label="供应商名称" label-width="130px">
                                        <el-input disabled style=" width:280px;" v-model="showForm.supplierName"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <!-- 第二行 -->
                            <el-row>
                                <el-col :span="8">
                                    <el-form-item label="疫苗类别" label-width="80px">
                                        <el-select
                                                disabled
                                                style=" width:165px;"
                                                v-model="showForm.vaccineType"
                                        >
                                            <el-option
                                                v-for=" vaccType in vaccineTypes "
                                                :label="vaccType.type"
                                                :key="vaccType.id"
                                                :value="vaccType.id"
                                            >
                                                <span style="margin-left:10px; color: #ED2C2A;">
                                                    <el-tag size="small" style="width:100px;text-align:center;font-size: 17px；"  effect="dark" type="primary">
                                                    {{ vaccType.type }}
                                                    </el-tag>
                                                </span>
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                <el-form-item label="疫苗等级" style="margin-left:10px">
                                        <el-select
                                                disabled
                                                style=" width:150px;"
                                                v-model="showForm.vaccDegree"
                                                placeholder="请选择等级"
                                        >
                                            <el-option
                                                    v-for="degree in vaccDeg"
                                                    :label="degree.label"
                                                    :key="degree.id"
                                                    :value="degree.id"
                                            >
                                                <span style="margin-left:10px; color: #000; font-size: 13px">
                                                    <el-tag size="small" style="width:50px;text-align:center;margin-right:5px"  effect="dark" type="primary">
                                                    {{ degree.label }}
                                                    </el-tag>
                                                    疫苗
                                                </span>
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="注射针数" label-width="75px">
                                        <el-input disabled style="width:152px;" v-model="showForm.totalNeedle"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </div>
                        <!-- 接种点信息 -->
                        <div class="supplierStyle">
                            <!-- 第三行 -->
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="接种点名称" label-width="100px" prop="vaccineSiteId">
                                        <el-input disabled style=" width:250px;" v-model="showForm.vaccSiteName"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="11">
                                    <el-form-item label="接种点电话" label-width="90px">
                                        <el-input disabled v-model="showForm.vaccSitePhone"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <!-- 第四行 -->
                            <el-row>
                                <el-col :span="23">
                                    <el-form-item label="所属区域" label-width="100px">
                                        <el-input disabled  v-model="showForm.vaccSiteArea"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="23">
                                    <el-form-item label="详细地址" label-width="100px">
                                        <el-input disabled v-model="showForm.vaccSiteAddress"></el-input>
                                    </el-form-item>
                                        </el-col>
                            </el-row>
                        </div>
                        <!-- 下发库存信息 -->
                        <div class="supplierStyle">
                            <el-row>
                                <el-col :span="11">
                                    <el-form-item label="下发数量" label-width="100px" prop="deCount">
                                        <el-input-number disabled  v-model="showForm.deCount"></el-input-number>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="该接种点目前库存" label-width="150px">
                                        <el-input disabled  v-model="showForm.stock"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </div>
                    </el-form>
                </span>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="showDialogVisible = false" type="primary" style="width:150px">确 定</el-button>
                </span>
            </el-dialog>

        </el-card>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                btnLoading: false,
                btnDisabled: false,
                vaccinesList: [],  //所有疫苗信息,带供应商id、名称
                vaccSites: [], // 所有接种点信息
                loading: true,
                total: 0,
                addDialogVisible: false, //添加对话框,
                editDialogVisible: false, //修改对话框
                showDialogVisible: false, //展示对话框
                showAdvanceSearch: false, // 展示高级搜索
                assignDialogVisible: false, //分配角色对话框
                labelPosition: "right", //lable对齐方式
                needles:[1,2,3,4,5],                  //注射总针数
                vaccDeg:[{id:1,label:"甲类"},{id:2,label:"乙类"},{id:3,label:"丙类"},{id:4,label:"丁类"}],  //疫苗等级
                vaccineTypes:[{id:1,type:"减毒活疫苗"},{id:2,type:"灭活疫苗"},{id:3,type:"基因重组疫苗"}],  //疫苗等级
                //查询对象
                queryMap: {
                    pageNum: 1,
                    pageSize: 8,
                    totalNeedle: "",
                    vaccineType:"",
                    vaccDegree:"",
                    supplierName: "",
                    vaccineName: "",
                    vaccSiteName:"",
                    vaccSitePhone:"",
                    vaccSiteArea:""
                },
                devolutRecordList: [],
                tempVaccine:{},  //添加时选择的疫苗信息(中间数据)
                tempVaccineSite:{}, //添加时选择的疫接种点信息(中间数据)
                showTitle:"", // 展示疫苗title
                addForm: {
                    vaccineId: "",
                    vaccineSiteId: "",
                    supplierId: "",
                    deCount: 0,
                }, //添加表单
                showForm: {},  //展示表单
                editForm: {}, //更新表单
                addFormRules: {
                    vaccineId:[
                        { required: true, message: "请选择要下发的疫苗", trigger: "change" }
                    ],
                    vaccineSiteId:[
                        { required: true, message: "请选择要下发的疫苗接种点", trigger: "change" }
                    ],
                    supplierId:[
                        { required: true, message: "请选择疫苗的供应商", trigger: "change" }
                    ],
                    deCount: [
                        { required: true, message: "请输入该疫苗的下发数量", trigger: "blur" }
                    ],
                }, //添加表单验证规则
                roles: [], //角色
                value: [], //用户拥有的角色
                uid: ""
            };
        },
        methods: {

            /**
             * 重置
             */
            reset(){
                this.queryMap= {
                    pageNum: 1,
                    pageSize: 8,
                    totalNeedle: "",
                    vaccineType:"",
                    vaccDegree:"",
                    supplierName: "",
                    vaccineName: "",
                    vaccSiteName:"",
                    vaccSitePhone:"",
                    vaccSiteArea:""
                };
            },
            /**
             * 加载疫苗下发列表
             */
            async getVaccDevolutionList() {
                const { data: res } = await this.$http.get("business/devolution/findList", {
                    params: this.queryMap
                });
                if(!res.success){
                    return this.$message.error(res.message);
                }
                this.total = res.data.total;
                this.devolutRecordList = res.data.devolutRecordList;
            },

            /**
             * 删除用户
             */
            async del(id) {
                const res = await this.$confirm(
                    "此操作将永久删除该用户, 是否继续?",
                    "提示",
                    {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning"
                    }
                ).catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除"
                    });
                });
                if (res === "confirm") {
                    const { data: res } = await this.$http.delete("system/users/delete/" + id);
                    if(res.success){
                        this.$notify.success({
                            title:'操作成功',
                            message:'用户删除成功',
                        });
                        this.getVaccDevolutionList();
                        await this.getAllVaccinesList();
                    }else {
                        this.$message.error(res.data.errorMsg);
                    }
                }
            },
            /**
             * 添加下发记录
             */
            async addDevolution() {
                this.$refs.addFormRef.validate(async valid => {
                    if (!valid) {
                        return;
                    } else {
                        this.btnLoading = true;
                        this.btnDisabled = true;
                        const { data: res } = await this.$http.post("business/devolution/add", this.addForm);
                        if(res.success){
                            this.$notify.success({
                                title:'操作成功',
                                message:'下发记录添加成功！',
                            });
                            this.addForm = {};
                            this.getVaccDevolutionList();
                            await this.getAllVaccinesList();
                        } else {
                            this.$message.error(res.message);
                        }
                        this.addDialogVisible = false;
                        this.btnLoading = false;
                        this.btnDisabled = false;
                    }
                });
            },
            /**
             * 更新用户
             */
            async updateUser() {
                this.$refs.editFormRef.validate(async valid => {
                    if (!valid) {
                        return;
                    } else {
                        this.btnLoading = true;
                        this.btnDisabled = true;
                        const { data: res } = await this.$http.put(
                            "system/users/update/" + this.editForm.id,this.editForm
                        );
                        if(res.success){
                            this.$notify({
                                title: "操作成功",
                                message: "用户基本信息已更新",
                                type: "success"
                            });
                            this.editForm = {};
                            await this.getVaccDevolutionList();
                            await this.getAllVaccinesList();
                        } else {
                            this.$message.error("用户信息更新失败:" + res.data.errorMsg);
                        }
                        this.editDialogVisible = false;
                        this.btnLoading = false;
                        this.btnDisabled = false;
                    }
                });
            },
            /**
             * 搜索用户
             */
            searchDevolute() {
                this.queryMap.pageNum = 1;
                this.getVaccDevolutionList();
            },
            /**
             * 获取下发记录信息
             */
            async getDevoInfo(id) {
                const { data: res } = await this.$http.get("business/devolution/edit/" + id);
                if(res.success){
                    this.showForm = res.data.devolution;
                    this.showTitle = "查看" +"【"+this.showForm.vaccineName +"】"+"下发记录"
                    this.showDialogVisible = true;
                } else {
                    return this.$message.error(res.message);
                }
            },
            /**
             * 疫苗下拉框监听事件
             */
            getVaccSelectforAdd(param){
                // 如果传过来的剩余量为0，则下发数量为0
                if(param.overage == 0){
                    this.addForm.deCount = param.overage
                }
                // 将疫苗供应商id传给addForm
                this.addForm.supplierId = param.supplierId
                this.tempVaccine = param;
            },
            getSiteSelectforAdd(param){
                this.tempVaccineSite = param;
            },
            /**
             *  改变页码
             */
            handleSizeChange(newSize) {
                this.queryMap.pageSize = newSize;
                this.getVaccDevolutionList();
            },
            /**
             * 翻页
             */
            handleCurrentChange(current) {
                this.queryMap.pageNum = current;
                this.getVaccDevolutionList();
            },
            /**
             * 关闭添加弹出框
             */
            closeAddDialog() {
                this.$refs.addFormRef.clearValidate();
                this.$refs.addFormRef.resetFields();
                this.addForm = {};
            },
            /**
             * 关闭查看下发记录弹出框
             */
            closeShowDialog() {
                this.showForm = {};
            },
            /**
             * 加载所有疫苗信息
             */
            async getAllVaccinesList() {
                const { data: res } = await this.$http.get("business/devolution/findAllVaccinesList");
                if(!res.success){
                    return this.$message.error(res.message);
                }
                this.vaccinesList = res.data.VaccinesList;
            },
            /**
             * 加载所有接种点信息
             */
            async getAllVaccineSiteList() {
                const { data: res } = await this.$http.get("business/devolution/findAllVaccSites");
                if(!res.success){
                    return this.$message.error(res.message);
                }
                this.vaccSites = res.data.VaccSites;
            }
        },
        created() {
            this.getVaccDevolutionList();
            this.getAllVaccinesList();
            this.getAllVaccineSiteList();
            setTimeout(() => {
                this.loading = false;
            }, 500);
        }
    };
</script>

<style>
    .el-dialog__footer{
        padding-top: 0px;
        text-align: center;
    }
    .searchStyle{
        border: 1px solid #409eff;
        border-radius: 5px;
        box-sizing: border-box;
        margin: 10px;
        padding: 5px;
    }
    .supplierStyle{
        border: 1px solid #409eff;
        border-radius: 5px;
        box-sizing: border-box;
        padding-top: 10px;
        margin-bottom: 10px;
    }
</style>